import React, {memo, useCallback, useState, useEffect, useRef} from 'react';
import {View, Text, TouchableHighlight, Animated, Modal} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import style from './CateFilterTop.style';
import {useTranslation} from 'react-i18next';
import Filterbox from './Filterbox';
import CateFilterSearch from './CateFilterSearch';
import CateFilterModal from './CateFilterModal';
import FilterModal from './FilterModal';
import {useSelector} from 'react-redux';

const CategroyTop = ({isTop}) => {
  const {t} = useTranslation();
  const [select, setSelect] = useState('');
  const [showModal, setShowModal] = useState(false);
  const [showFilterModal, setShowFilterModal] = useState(false);
  const timer = useRef(null);
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const default_sort_type = useSelector(state => {
    return state.categroy.default_sort_type;
  });
  const [sortSelect, setSortSelect] = useState(default_sort_type);

  const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: -100,
      duration: 500,
      useNativeDriver: false, // 开启后动画效果明显卡帧，性能好的机子可以不开
    }).stop();
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 500,
      useNativeDriver: false, // 开启后动画效果明显卡帧，性能好的机子可以不开
    }).start();
  };

  const fadeOut = () => {
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 500,
      useNativeDriver: false, // 开启后动画效果明显卡帧，性能好的机子可以不开
    }).stop();
    Animated.timing(fadeAnim, {
      toValue: -100,
      duration: 500,
      useNativeDriver: false, // 开启后动画效果明显卡帧，性能好的机子可以不开
    }).start();
  };
  const onChange = useCallback(
    val => () => {
      if (val === 'Filter') {
        setShowFilterModal(true);
        setShowModal(false);
      } else {
        setShowFilterModal(false);
        setShowModal(true);
      }
      setSelect(val);
    },
    [],
  );
  const onRequestClose = useCallback(() => {
    setShowModal(false);
    setShowFilterModal(false);
  }, []);
  /**
   * sort 选择回调
   */
  const onSelectSort = useCallback(
    val => () => {
      setShowModal(false);
      setSortSelect(val);
      // 执行数据请求
    },
    [],
  );
  // console.log(isTop);
  useEffect(() => {
    if (isTop) {
      // 动画
      fadeOut();
    } else {
      // 动画
      fadeIn();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isTop, timer]);
  return (
    <Animated.View
      style={[
        style.header,
        {
          // translateY: fadeAnim, // Bind opacity to animated value
          transform: [{translateY: fadeAnim}],
        },
      ]}>
      <CateFilterSearch />
      <Filterbox select={select} onChange={onChange} />
      {select === 'Filter' ? (
        <FilterModal
          onChange={onChange}
          showModal={showFilterModal}
          onRequestClose={onRequestClose}
          onSelectSort={onSelectSort}
          sortSelect={sortSelect}
          select={select}
        />
      ) : (
        <CateFilterModal
          onChange={onChange}
          showModal={showModal}
          onRequestClose={onRequestClose}
          onSelectSort={onSelectSort}
          sortSelect={sortSelect}
          select={select}
        />
      )}
    </Animated.View>
  );
};

export default memo(CategroyTop);
